<template>
  <div>
    <!-- 卡片 -->
    <el-card>
      <div style="font-size:20px;margin-bottom:20px;">航拍图列表</div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入项目名称" size="small" v-model="name" clearable @keyup.enter.native="getList(1)">
            <el-button slot="append" icon="el-icon-search" @click="getList(1)">搜索</el-button>
          </el-input>
        </el-col>
         <el-col :span="16">
          <!-- <el-button @click="add" size="small">上传</el-button> -->
          <el-button @click="add" size="small" v-if="role!='SUPER'">上传</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表区域 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="projectName" label="项目名称" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="imageCount" label="航拍图数量" min-width="60" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <!-- 查看按钮 -->
            <el-button type="text" size="mini" @click="detail(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <el-dialog title="新增航拍图" :visible.sync="dialogFormVisible">
      <el-form
        :label-position="labelPosition"
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        size="small"
        style="width:380px;margin: 0 auto;"
        >
        <div >
            <el-form-item label="图片名称" prop="name">
            <el-input v-model="form.name"></el-input>
            </el-form-item>
            <!-- <el-form-item label="拍摄日期" prop="createTime">
            <el-date-picker
                v-model="form.createTime"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width:280px;">
            </el-date-picker>
            </el-form-item> -->
            <el-form-item label="所属项目" prop="projectId">
            <el-select v-model="form.projectId" placeholder="请选择所属项目" style="width:280px;" filterable>
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-upload
                class="avatar-uploader"
                :action="upload"
                accept=".bmp,.jpg,.png,.tif,.gif,.pcx,.tga,.exif,.fpx,.svg,.psd,.cdr,.pcd,.dxf,.ufo,.eps,.ai,.raw,.WMF,.webp"
                :show-file-list="false"
                
                :on-success="handleAvatarSuccess">
                <el-button size="small" type="primary" icon="el-icon-plus">上传</el-button>
                <div class="tips">支持图片格式JPG,PNG,最大20M</div>
                <div class="tips">支持视频格式MP4,最大200M</div>
              </el-upload>
              <div v-if="imageUrl">
                <img :src="imageUrl" class="img">
                <el-button @click="remove" v-if="role!='SUPER'">删除</el-button>
              </div>
            </el-form-item>
        </div>
        </el-form>
        <div slot="footer" class="dialog-footer botton_btn">
            <el-button type="primary" @click="save" size="small" style="margin-right:40px;">保 存</el-button>
            <el-button @click="cancel" size="small">取 消</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import base from '../api/base'
export default {
  data() {
    return {
      role:localStorage.getItem('role'),
      upload: base.upload,
      
      name:'',
      tableData: [],
      //   分页
      currentPage: 1,
      pageSize:10,
      total: 0,
      dialogFormVisible: false,
      options:[],
      form: {
          name: '',
          createTime: '',
          projectId: ''
      },
      labelPosition: "left",
      imageUrl: '',
      imgId: '',
      path: '',
      rules: {
          name: [
            { required: true, message: '请输入图片名称', trigger: 'blur' }
          ],
          createTime: [
            { type: 'string', required: true, message: '请选择日期', trigger: 'change' }
          ],
          projectId: [
            { required: true, message: '请选择所属项目', trigger: 'change' }
          ],
        }
    };
  },
  methods: {
     //查询所有项目 
    find() {
      this.$api.loginhome.findAllNcpr().then(res => {
        if(res.success) {
          this.options = res.data
        }
      })
    },
    handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.imgId = res.data.successFiles[0].id
        this.path = res.data.successFiles[0].filePath
    },
    remove() {
      this.imageUrl = ''
      this.imgId = ''
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    add () {
      this.dialogFormVisible = true
    },
    cancel() {
      this.$refs['form'].resetFields()
      this.path = ''
      this.imgId = ''
      this.imageUrl = ''
      this.dialogFormVisible = false
    },
     save() {
      let params = {
          path: this.path,
          projectId: this.form.projectId,
          fileId: this.imgId,
          fileName: this.form.name,
          createTime: this.form.createTime
      }
      this.$refs['form'].validate((valid) => {
        if(valid) {
            if(this.imgId === '') {
                this.$message.error('请上传图片')
            } else {
            this.$api.loginhome.addAir(params)
                .then(res => {
                console.log(res)
                if (res.success) {
                    this.$message.success("保存成功")
                    this.dialogFormVisible = false
                    this.getList()
                    this.$refs['form'].resetFields()
                    this.path = ''
                    this.imgId = ''
                    this.imageUrl = ''
                
                } else {
                    console.log(res.message)
                    this.$message.error(res.message);
                }
                })
                .catch(() => {
            })
            }
        } else {
            return false
        }
      })
    },
    //查看查看详情
    detail(id) {
      this.$router.push({path:'/addPhoto',query:{data: id}})
    },
    //刷新列表
    getList(val) {
      if(val) {
          this.currentPage = 1
      }
      let params = {
          name: this.name,
          start: this.currentPage - 1,
          pageSize: this.pageSize
      }
      this.$api.loginhome.airPage(params)
      .then(res => {
        this.tableData = res.data
        this.total = res.recordsTotal
        this.find()
      })
      .catch(() => {
      });
    },
  },
  created() {
    this.getList()
  }
};
</script>

<style scoped>
.el-pagination {
  padding-top: 20px;
  text-align: right;
}
/deep/.el-table th,
.el-table tr {
  background: #e4e4e4;
}
/deep/.el-table thead {
  color: #7a7c80;
}
/deep/.el-input-group__append button.el-button {
  background-color: #409eff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 32px;
}
/deep/.el-input-group__append .el-button {
  padding: 10px 20px;
}
/deep/.el-input-group__append,
.el-input-group__prepend {
  color: #ffffff;
}
/deep/.el-table td,
.el-table th {
  text-align: center;
}
/deep/.el-table th > .cell {
  text-align: center;
}
/deep/.el-col-16 {
  text-align: right;
}
/deep/.el-dialog__body {
  margin: -35px 0px;
}
.con_dialog h4 {
  margin: 7px 0px 7px 30px;
}
.con_dialog p {
  margin: 7px 0px 7px 60px;
  font-size: 12px;
}
.mapbox {
  width: 610px;
  height: 220px;
  background: gainsboro;
  margin: 10px 0px 7px 60px;
}
.time_span {
  text-align: right;
  padding: 10px 48px 10px 10px;
}
.botton_btn {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.img {
    margin-top:20px;
    width:400px;
    height:400px;
}
.tips{
  font-size: 12px;
  color: red;
}
</style>
